<template>
	<table class="r-table">
		<tr v-for="row in formateColumn">
			<td
				:rowspan="col.mc?.rs"
				:colspan="col.mc?.cs"
				v-for="col in row"
				:style="{
					textAlign: col.align,
					fontSize: col.fs + 'px',
					fontWeight: col.bl == 1 ? 600 : 400,
					color: col.fc,
					...col.style,
					position: 'relative',
					zIndex: 0,
					background: isColorShow(col, moreNewsModel, baseModel) || col.linkType == true ? '' : '#FBEADA',
				}"
			>
				<span>{{ col.index }}</span>
				<slot v-if="!!slots[col.prop]" :name="col.prop" :data="model[col.prop]"></slot>
				<span v-else-if="col.prop && !col.disabled" class="w-100">
					<template v-if="col.type == 'radio'">
						<input
							type="radio"
							:disabled="isDetail"
							:name="col.prop"
							v-if="model[col.prop] == col.v"
							:value="model[col.prop]"
							checked
							@input="(e:any)=>handleChange(e,col)"
						/>
						<input type="radio" :disabled="isDetail" :name="col.prop" v-else :value="model[col.prop]" @input="(e:any)=>handleChange(e,col)" />
					</template>
					<template v-else-if="isDetail == false">
						<PopoverText
							:text="baseModel[col.prop]"
							:isMore="col.isMore"
							:beforeText="moreNewsModel[col.prop]"
							v-if="baseModel[col.prop]"
							:isColorShow="isColorShow(col, moreNewsModel, baseModel)"
						></PopoverText>
            <template v-else>
              <input v-if="col.model" v-model="col.model[col.prop]" class="w-100" @change="handleInputChange(col.model[col.prop],col)" >
						  <input v-else v-model="model[col.prop]" class="w-100" @change="handleInputChange(model[col.prop],col)" />
            </template>
					</template>
					<PopoverText
						:text="col.model?col.model[col.prop]:model[col.prop]"
						:beforeText="moreNewsModel[col.prop]"
						v-else
						:isMore="col.isMore"
						:isColorShow="isColorShow(col, moreNewsModel, baseModel)"
					></PopoverText>
				</span>
				<div v-else class="flex-column">
					<el-popover placement="bottom" :width="400" trigger="hover" :disabled="!col.isMore">
						<p>{{ col.m }}</p>
						<template #reference>
							<span :class="{ 'text-overflow': col.isMore }" :style="{ '--overflow-width': col.isMore ? '80px' : '' }"
								>{{ col.m }} {{ col.propName }}</span
							>
						</template>
					</el-popover>
					<span v-if="col.smallM">{{ col.smallM }}</span>
				</div>

				<div v-if="col.archives" class="text-tip" id="no-print" :style="{opacity:1, '--base-text-bg': '#ed6d05a1' }" @click="handleArchives(col, model)">
					<span class="tip-text-new">{{ col.archivesText || '档案' }}</span>
				</div>
				<template v-if="col.linkType">
					<div
						class="text-tip"
						id="no-print"
						:style="{ opacity: isViewStatus == null ? 0 : 1, '--base-text-bg': moreNewsModel['viewStatus'] == 1 ? '#38b0fe1a' : '#ed6d05a1' }"
						@click="handleMoreNews(col, baseModel, model)"
					>
						<span class="tip-text-detail" v-if="moreNewsModel['viewStatus'] == 1">详</span>
						<span class="tip-text-new" v-else>新</span>
					</div>
				</template>

				<div
					class="text-tip"
					id="no-print"
					v-else-if="baseModel[col.prop] && moreNewsModel[col.prop]"
					:style="{
						display: isColorShow(col, moreNewsModel, baseModel) ? 'block' : 'block',
						'--base-text-bg': isColorShow(col, moreNewsModel, baseModel) ? '' : '#FBEADA',
					}"
					@click="handleMoreNews(col, baseModel, model)"
				>
					<template v-if="col.link && baseModel[col.prop]">
						<span class="tip-text-detail" v-if="moreNewsModel[col.prop] == baseModel[col.prop]">详</span>
						<span class="tip-text-new" v-else>新</span>
					</template>
				</div>
			</td>
		</tr>
	</table>
</template>

<script setup lang="ts">
import PopoverText from './PopoverText/index.vue'
const props = withDefaults(
	defineProps<{
		column: any
		model: any
		baseModel?: any
		isDetail?: boolean
		moreNewsModel?: any
	}>(),
	{
		baseModel: {},
		model: {},
		moreNewsModel: {},
	}
)

const emit = defineEmits(['showLink', 'change'])

const slots = useSlots()

const isColorShow = (col, moreNewsModel, baseModel) => {
	if (moreNewsModel[col.prop]) {
		return moreNewsModel[col.prop] == baseModel[col.prop] || !col.setColor
	} else {
		return true || !col.setColor
	}
}

const isViewStatus = computed(() => {
	if (props.moreNewsModel['viewStatus'] == 1) {
		return true
	} else if (props.moreNewsModel['viewStatus'] == 0) {
		return false
	}
})
const formateColumn = computed(() => {
	return props.column.map((row: any) => {
		return row.map((col) => {
			return {
				...col,
				align: col.align || 'center',
				bg: col.bg || '',
				fc: col.fc || '#000',
				fs: col.fs || 14,
				bl: col.bl || 2,
				style: col.style,
				mc: col.mc
					? col.mc
					: {
							rs: 1,
							cs: 1,
					  },
			}
		})
	})
})

const handleMoreNews = (col, baseModel, model) => {
	if ((col.link && baseModel[col.prop]) || (col.linkType && Object.values(baseModel).length > 0)) {
		col.showLink && col.showLink(col, model)
	}
}

const handleArchives = (col, model) => {
	col.showLink && col.showLink(col, model)
}

const handleInputChange = (value,col) => {
	emit('change', props.model)
  col.change && col.change(value, col)
}
const handleChange = (e: any, col: any) => {
	if (props.isDetail) return
	props.model[col.prop] = col.v
	emit('change', props.model)
}
</script>

<style scoped lang="scss">
$border-color: #5e5e5e;
$text-color: #000;

.r-table {
	width: 100%;
	border-collapse: collapse;

	td,
	th {
		padding: 5px 10px;
		font-size: 12px;
		font-family: Verdana;
		color: $text-color;
		border: 1px solid $border-color;
		height: 28px;
	}
}

input {
	outline-style: none;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 6px;
	width: 100%;
	font-size: 14px;
	font-family: 'Microsoft soft';
}
input:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.text-tip {
	--base-text-bg: rgb(56 176 255 / 0%);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--base-text-bg);
	z-index: -1;
	opacity: 0;
	&:hover {
		cursor: pointer;
	}
	.tip-text-new {
		position: absolute;
		right: 0;
		top: -15px;
		color: #fff;
		border-radius: 4px;
		padding: 2px;
		min-width: 40px;
		background-color: #ed6d05a1;
	}
	.tip-text-detail {
		background-color: #179fe3;
		position: absolute;
		right: 0;
		top: -10px;
		color: #fff;
		border-radius: 4px;
		padding: 2px;
		width: 40px;
	}
}
</style>
